<!DOCTYPE html>
<html lang="zh_CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:strive="http://www.w3.org/1999/xlink">
<head>
    <meta charset="utf-8"/>
    <title>系统登录</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <strive:import lib="jquery"/>
    <link rel="stylesheet" media="screen" th:href="@{/sys/css/login_css/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/sys/css/login_css/css/reset.css}"/>
</head>
<body>
<div id="particles-js">
    <form id="form" th:action="@{/loginProcess}" method="post">
        <div class="login">
            <div class="login-top">
                登录
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img th:src="@{/sys/css/login_css/img/name.png}"/></div>
                <div class="login-center-input">
                    <input type="text" name="userName" value="" placeholder="请输入您的用户名"
                           onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
                    <div class="login-center-input-text">用户名</div>
                </div>
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img th:src="@{/sys/css/login_css/img/password.png}"/></div>
                <div class="login-center-input">
                    <input type="password" name="password" value="" placeholder="请输入您的密码"
                           onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
                    <div class="login-center-input-text">密码</div>
                </div>
            </div>
            <div class="login-button">
                登录
            </div>
        </div>
        <div class="sk-rotating-plane"></div>
    </form>
</div>
<!-- scripts -->
<script th:src="@{/sys/css/login_css/js/particles.min.js}"></script>
<script th:src="@{/sys/css/login_css/js/app.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    //获取服务器上下文路径放在context变量中
    var context = [[${#httpServletRequest.getContextPath()}]];
    //浏览器可见高度
    var clientHeight = document.documentElement.clientHeight;
    //浏览器可见宽度
    var clientWidth = document.documentElement.clientWidth;

    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
        }
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }

    function getCaptcha(){
        $("#captcha").attr("src", context + "/auth/captcha?time=" + new Date().getTime());
    }

    document.querySelector(".login-button").onclick = function () {
        var name = $("input[name='userName']").val();
        var pass = $("input[name='password']").val();
        var captcha = $("input[name='captcha']").val();
        var remember = $("input[name='rememberMe']").is(':checked');
        addClass(document.querySelector(".login"), "active")
        addClass(document.querySelector(".sk-rotating-plane"), "active")
        document.querySelector(".login").style.display = "none"
        $.ajax({
            url: context + "/oauth/token",
            type: "post",
            async: true,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization","basic c3RyaXZlX2FwcF9pZF9zeXNwbGF0Zm9ybTpzdHJpdmVfYXBwX3NlY3JldF9zeXNwbGF0Zm9ybQ==");
            },
            data: {
                username: name,
                password: pass,
                grant_type: "password",
                scope: "request"
            },
            success: function (result) {
                document.cookie="access_token="+result.access_token;
                location.href = context + "/admin/index";
                removeClass(document.querySelector(".login"), "active")
                removeClass(document.querySelector(".sk-rotating-plane"), "active")
                document.querySelector(".login").style.display = "block"
            },
            error: function () {
                alert("登录认证失败");
                removeClass(document.querySelector(".login"), "active")
                removeClass(document.querySelector(".sk-rotating-plane"), "active")
                document.querySelector(".login").style.display = "block"
            }
        });
    }
    /*]]>*/
</script>
<div style="text-align:center;">
</div>
</body>
</html>